<style>
	.itemBorder {
		padding: 10px;
		background: #fff;
		border-radius: 4px;
	}

	.listTitle {
		background-image: linear-gradient(to right, #3a3ef4, #3a3ef4);
		color: #fff;
		border-radius: 40px;
		padding: 6px 10px;
		margin: 10px 0;
	}

	.addButton {
		width: 20px;
		height: 20px;
		line-height: 16px;
		text-align: center;
		border-radius: 50%;
		background: #3b3df2;
		color: #fff;
		margin-right: 5px;
		cursor: pointer;
	}
</style>
<template>
	<div id="content" style="height: 100%;">

		<el-row :gutter="10" class="mb10">
			<el-col :span="12">
				<div class="itemBorder">
					<div class="displayFlexBet mb10">
						<div style="font-size: 18px;">危险废物信息</div>
						<!-- <div class="displayFlex point">
							<div class="addButton">+</div>
							<div>新增</div>
						</div> -->
						<el-button @click="$refs.addWaste.open()" icon="el-icon-plus" type="primary" size="mini">新增</el-button>
					</div>

					<el-table :data="dataList1" border size="mini" stripe
						style="width: 100%;height: 325px;overflow-y: auto;border-radius: 4px;">
						<el-table-column type="index" width="50">
						</el-table-column>
						<el-table-column prop="wasteName" label="废物名称">
						</el-table-column>
						<el-table-column prop="wasteCode" label="废物代码">
						</el-table-column>
						<el-table-column label="操作" width="60" align="center">
							<div slot-scope="scope" style="text-align: center;">
								<el-button type="text" size="small" @click="$refs.addWaste.open(scope.row)">编辑</el-button>
							</div>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="itemBorder">
					<div class="displayFlexBet mb10">
						<div style="font-size: 18px;">产生源信息</div>
						<el-button @click="$refs.addWasteSource.open()" icon="el-icon-plus" type="primary"
							size="mini">新增</el-button>
					</div>
					<el-table :data="dataList2" border size="mini" stripe
						style="width: 100%;height: 325px;overflow-y: auto;border-radius: 4px;">
						<el-table-column type="index" width="50">
						</el-table-column>
						<el-table-column prop="sourceCode" label="产生编号">
						</el-table-column>
						<el-table-column prop="sourceName" label="产生源">
						</el-table-column>
						<el-table-column label="操作" width="60" align="center">
							<div slot-scope="scope" style="text-align: center;">
								<el-button type="text" size="small" @click="$refs.addWasteSource.open(scope.row)">编辑</el-button>
							</div>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>

		<el-row :gutter="10">
			<el-col :span="12">
				<div class="itemBorder">
					<div class="displayFlexBet mb10">
						<div style="font-size: 18px;">仓库信息</div>
						<el-button @click="$refs.addStock.open()" icon="el-icon-plus" type="primary" size="mini">新增</el-button>
					</div>

					<el-table :data="dataList3" border size="mini" stripe
						style="width: 100%;height: 325px;overflow-y: auto;border-radius: 4px;">
						<el-table-column type="index" width="50">
						</el-table-column>
						<el-table-column prop="storageNum" label="仓库编号">
						</el-table-column>
						<el-table-column prop="storageName" label="仓库名称">
						</el-table-column>
						<el-table-column label="操作" width="60" align="center">
							<div slot-scope="scope" style="text-align: center;">
								<el-button type="text" size="small" @click="$refs.addStock.open(scope.row)">编辑</el-button>
							</div>
						</el-table-column>
					</el-table>
				</div>
			</el-col>

			<el-col :span="12">
				<div class="itemBorder">
					<div class="displayFlexBet mb10">
						<div style="font-size: 18px;">负责人信息</div>				
						<el-button @click="$refs.addDepartment.open()" icon="el-icon-plus" type="primary" size="mini">新增</el-button>
					</div>
					<el-table :data="dataList4" border size="mini" stripe
						style="width: 100%;height: 325px;overflow-y: auto;border-radius: 4px;">
						<el-table-column type="index" width="50">
						</el-table-column>
						<el-table-column prop="departmentManagerName" label="部门">
						</el-table-column>
						<el-table-column prop="departmentName" label="负责人">
						</el-table-column>
						<el-table-column label="操作" width="60" align="center">
							<div slot-scope="scope" style="text-align: center;">
								<el-button type="text" size="small" @click="$refs.addDepartment.open(scope.row)">编辑</el-button>
							</div>
						</el-table-column>
					</el-table>
				</div>
			</el-col>
		</el-row>

		<!--新增危废-->
		<addWaste ref="addWaste" :entId="params.entId" @success="getEntWasteInfoByEntId()" :editData='editData' />

		<!--保存产生源-->
		<addWasteSource ref="addWasteSource" :entId="params.entId" @success="pageWasteSourceByEntId()"
			:editData='editData' />

		<!--保存仓库-->
		<addStock ref="addStock" :entId="params.entId" @success="pageStorageBase()" :editData='editData' />
		
		<!--保存负责人-->
		<addDepartment ref="addDepartment" :entId="params.entId" @success="getFacilitatorDepartment()"
			:editData='editData' />

	</div>
</template>

<script>
	import addWaste from '@/components/addWaste'
	import addWasteSource from '@/components/addWasteSource'
	import addStock from '@/components/addStock'
	import addDepartment from '@/components/addDepartment'
	let that
	export default {
		components: {
			addWaste,
			addWasteSource,
			addStock,
			addDepartment,
		},
		data() {
			return {
				params: {
					facilitatorId: '',
					ticketId: '',
					subjectId: ''
				},
				editData: '',
				dataList1: [],
				dataList2: [],
				dataList3: [],
				dataList4: '',
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.params.facilitatorId = that.getQueryString("facilitatorId")
			that.params.ticketId = that.$store.state.token
			that.params.subjectId = that.getQueryString("subjectId")
			that.getFacilitatorCustomerDetailInfo()


		},
		methods: {
			getFacilitatorCustomerDetailInfo() {
				that.ajax({
					url: '/areaSubject/getFacilitatorCustomerDetailInfo?ticketId=' + that.params.ticketId,
					data: {
						facilitatorId: that.params.facilitatorId,
						subjectId: that.params.subjectId,
						ticketId: that.params.ticketId,
					},
					//contentType: 'application/json',
					method: 'POST',
					success: function(result) {
						if (result.data) {
							that.params.entId = result.data.entId
						}
						that.getEntWasteInfoByEntId()
						that.pageWasteSourceByEntId()
						that.pageStorageBase()
						that.getFacilitatorDepartment()
					},
				})
			},

			//危废信息
			getEntWasteInfoByEntId() {
				that.ajax({
					url: '/hw/entWaste/getEntWasteInfoByEntId?ticketId=' + that.params.ticketId + "&entId=" +
						that
						.params.entId,
					data: "",
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList1 = result.data
						}
					},
				})
			},

			//产生源信息
			pageWasteSourceByEntId() {
				that.ajax({
					url: '/hw/wasteSource/pageWasteSourceByEntId?ticketId=' + that.params.ticketId +
						"&entId=" + that
						.params.entId,
					data: "",
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList2 = result.data.list
						}
					},
				})
			},

			//仓库列表
			pageStorageBase() {
				that.ajax({
					url: '/hw/storageBase/pageStorageBase?ticketId=' + that.params.ticketId +
						"&pageIndex=1&pageSize=9999",
					data: JSON.stringify({
						ticketId: that.params.ticketId,
						entId: that.params.entId,
						isDefault: 0,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList3 = result.data.list
						}
					},
				})
			},

			//负责人列表
			getFacilitatorDepartment() {
				that.ajax({
					url: "/facilitatorDepartment/getFacilitatorDepartmentList?ticketId=" + that.params
						.ticketId,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
						facilitatorId: that.params.facilitatorId,
						departmentType: 'HW_DEPARTMENT'
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.dataList4 = result.data
						}
					},
				})
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>